<template>
  <div class="app-container" style="padding-bottom: 5px;">
    <!-- 顶部导航栏 -->
    <el-header style="padding: 0; height: 50px;">
      <div style="text-align: right;">
        <el-button type="primary" :plain="!isTableView" @click="isTableView = true">表格视图</el-button>
        <el-button type="primary" :plain="isTableView" @click="isTableView = false">分区视图</el-button>
      </div>
    </el-header>

    <!-- 根据 isTableView 的值显示不同的视图 -->
    <div v-if="isTableView">
      <!-- <el-form
        :model="queryParams"
        ref="queryRef"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="标签名" prop="labelName">
          <el-input
            v-model="queryParams.labelName"
            placeholder="请输入标签名"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>-->

      <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['moodWeather:moodWeather:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['moodWeather:moodWeather:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['moodWeather:moodWeather:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['moodWeather:moodWeather:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>-->

      <el-table
        v-loading="loading"
        :data="moodWeatherList"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="序号" align="center" width="120">
          <template
            #default="scope"
          >{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="标签名" align="center" prop="labelName" width="180" />
        <el-table-column label="描述" align="center" prop="description" show-overflow-tooltip />
        <el-table-column label="图标" align="center" prop="svgCode" width="200">
          <template #default="scope">
            <div v-html="modifySvgSize(scope.row.svgCode) || '无图标'"></div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['moodWeather:moodWeather:edit']"
          >修改</el-button>
          <el-button
            link
            type="primary"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['moodWeather:moodWeather:remove']"
          >删除</el-button>
        </template>
        </el-table-column>-->
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改心情天气对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
        <el-form ref="moodWeatherRef" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="标签名" prop="labelName">
            <el-input v-model="form.labelName" placeholder="请输入标签名" />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="图标" prop="svgCode">
            <el-input v-model="form.svgCode" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div v-else>
      <!-- 天气标签 -->
      <div class="box-card">
        <h3 style="margin-top:5px; margin-left:-10px;">天气标签</h3>
        <el-row :gutter="16">
          <el-col v-for="weather in weatherTags" :key="weather.id" :span="4" class="tag-card">
            <el-popover placement="top" :width="200" trigger="hover" :content="weather.description">
              <template #reference>
                <el-card shadow="hover" class="custom-card">
                  <div v-html="modifySvgSize(weather.svgCode,true) || '无图标'" class="icon-container"></div>
                  <div style="padding-top: 10px; font-size: 12px;">
                    <span>{{ weather.labelName }}</span>
                  </div>
                </el-card>
              </template>
            </el-popover>
          </el-col>
        </el-row>
      </div>

      <!-- 心情标签 -->
      <div class="box-card" style="margin-top: 15px;">
        <h3 style="margin-top:5px; margin-left:-10px;">心情标签</h3>
        <el-row :gutter="16">
          <el-col v-for="mood in moodTags" :key="mood.id" :span="4" class="tag-card">
            <el-popover placement="top" :width="200" trigger="hover" :content="mood.description">
              <template #reference>
                <el-card shadow="hover" class="custom-card">
                  <div v-html="modifySvgSize(mood.svgCode) || '无图标'" class="icon-container"></div>
                  <div style="padding-top: 10px; font-size: 12px;">
                    <span>{{ mood.labelName }}</span>
                  </div>
                </el-card>
              </template>
            </el-popover>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup name="MoodWeather">
import { ref } from "vue";

import {
  listMoodWeather,
  getMoodWeather,
  delMoodWeather,
  addMoodWeather,
  updateMoodWeather
} from "@/api/moodWeather/moodWeather";

const { proxy } = getCurrentInstance();

const moodWeatherList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const isTableView = ref(true);

// 心情天气标签数组
const weatherTags = ref([]);
const moodTags = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    labelName: null,
    description: null,
    svgCode: null
  },
  rules: {
    labelName: [{ required: true, message: "标签名不能为空", trigger: "blur" }],
    svgCode: [{ required: true, message: "图标不能为空", trigger: "blur" }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询所有心情天气标签列表 */
function getAllMoodWeatherList() {
  loading.value = true;
  listMoodWeather({
    pageNum: 1,
    pageSize: 1000
  })
    .then(response => {
      weatherTags.value = response.rows.filter(row => row.isMood === 0);
      moodTags.value = response.rows.filter(row => row.isMood === 1);
      console.log("获取心情天气标签列表成功:", weatherTags.value);
      loading.value = false;
    })
    .catch(error => {
      console.error("获取心情天气标签列表失败:", error);
      loading.value = false;
    });
}

/** 查询心情天气列表 */
function getList() {
  loading.value = true;
  listMoodWeather(queryParams.value).then(response => {
    moodWeatherList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    labelName: null,
    description: null,
    svgCode: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null
  };
  proxy.resetForm("moodWeatherRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加心情天气";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _id = row.id || ids.value;
  getMoodWeather(_id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改心情天气";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["moodWeatherRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateMoodWeather(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addMoodWeather(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm('是否确认删除心情天气编号为"' + _ids + '"的数据项？')
    .then(function() {
      return delMoodWeather(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "moodWeather/moodWeather/export",
    {
      ...queryParams.value
    },
    `moodWeather_${new Date().getTime()}.xlsx`
  );
}

// 修改 svgCode 代码中的 width 和 height 属性，使其为 22px
function modifySvgSize(svgCode, isHover) {
  if (svgCode) {
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgCode, "image/svg+xml");
    const svgElement = svgDoc.querySelector("svg");
    if (svgElement) {
      svgElement.setAttribute("width", isHover ? "30" : "22");
      svgElement.setAttribute("height", isHover ? "30" : "22");
      return new XMLSerializer().serializeToString(svgElement);
    }
  }
  return svgCode;
}

getList();
getAllMoodWeatherList();
</script>

<style scoped>
.box-card {
  background-color: #f9fbfc;
  width: 100%;
  padding: 10px 20px 15px 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag-card {
  display: flex;
  justify-content: center;
}

.custom-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  border: none;
  background-color: #f9fbfc;
  width: 90%;
  height: 90%;
  text-align: center;
}

.custom-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.custom-card:hover .icon-container {
  transform: scale(1.125); /* 22 * 1.125 = 25 */
}
</style>
